﻿<template>
  <div class="table">
    <el-table
      :data="tableData"
      ref="tableData"
      stripe
      @selection-change="handleSelectionChange"
      style="width: 100%"
      :header-cell-style="{ 'background-color': '#D9D9D9' }"
      :cell-class-name="addClass"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="certId" label="单号" width="180"></el-table-column>
      <el-table-column prop="appliType" label="申请人类型" width="180">
        <template slot-scope="scope">{{scope.row.appliType?'自然人':'企业/单位申请'}}</template>
        <template slot-scope="scope">{{scope.row.appliType?'自然人':'企业/单位申请'}}</template>  
      </el-table-column>
      <el-table-column prop="appName" label="申请人姓名" width="200"></el-table-column>
      <el-table-column prop="category" label="业务类型" width="600"></el-table-column>
      <el-table-column prop="deptName" label="网点名称"></el-table-column>
      <el-table-column label="审核状态" width="180">
        <template slot-scope="scope">
          <p v-if="tableData[scope.$index].commitStatus == 4">预约成功</p>
          <p v-if="tableData[scope.$index].commitStatus == 2">审核成功</p>
          <p v-if="tableData[scope.$index].commitStatus == 3">审核失败</p>
          <p v-if="tableData[scope.$index].commitStatus == 1">审核中 </p>
        </template>
      </el-table-column>

      <el-table-column label="操作" v-if="isbutton === 0">
        <template slot-scope="scope">
          <el-button
            @click="examine(scope.$index, scope.row)"
            type="text"
            size="small"
            style="color:#2C9DFC"
          >查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="isbutton === 3">
        <template slot-scope="scope">
          <el-button
            @click="cause(scope.$index, scope.row)"
            type="text"
            size="small"
            style="color:#E6A23C"
          >失败原因</el-button>
          <el-button
            @click="amend(scope.$index, scope.row)"
            type="text"
            size="small"
            style="color:#2C9DFC"
          >修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="isbutton === 2">
        <template slot-scope="scope">
          <el-button
            @click="order(scope.$index, scope.row)"
            type="text"
            size="small"
            style="color:#2C9DFC"
          >预约</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="isbutton === 1">
        <template slot-scope="scope">
          <el-button
            @click="viewDetails(scope.$index, scope.row)"
            type="text"
            size="small"
            style="color:#2C9DFC"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paging">
      <el-button
        class="batchdelete"
        v-if="show"
        size="mini"
        :disabled="judeg"
        type="primary"
        @click="online"
      >批量预约</el-button>
      
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageLength"
        ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      tableData: [],
      isbutton: 1,
      //分页部分
      pageNum: 1,
      pageSize: 10,
      pageLength: 0,
      //存储选中数据
      pitchOn: [],
      //是否禁用
      judeg: true,
      state: "审核失败",
      path: "",
    };
  },
  props: ["name", "show"],
  watch: {
    // 父组件列表数据更新，子组件相应更新
    "name.table"(newVal) {
      this.tableData = newVal;
    },
  },
  methods: {
    ...mapMutations(["changeTopState", "changeMyBusState"]),
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.$emit("handleCurrentChange", val);
    },
    //单选全选
    handleSelectionChange(val) {
      // ////console.log(val);
      this.judeg = true;
      if (!val[1]) return;
      this.judeg = false;
      this.pitchOn = val;
      this.$emit("handleSelectionChange", val);
    },
    //查看详情
    examine(index, row) {
      // console.log(index, row);
      console.log(row)
      this.jumpTo(row);
      this.$emit("examine", index, row);
    },
    //失败原因
    cause(index, row) {
      this.$emit("cause", index, row);
    },
    //修改
    amend(index, row) {
      this.changeTopState("/business/allBusiness");
      this.$emit("amend", index, row);
      console.log(index, row);
    },
    //预约
    order(index, row) {
      console.log(row);
      this.$emit("order", index, row);
       this.$emit('ids',row.id)
    },
    //查看详情
    viewDetails(index, row) {
      this.jumpTo(row); // 跳转对应的表单
      this.$emit("viewDetails", index, row);
    },
    //样式
    addClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 7) {
        // return 'stateStyle'
        if (this.isbutton === 0) {
          return "stateStyleone";
        }
        if (this.isbutton === 2) {
          return "stateStylethree";
        }
        if (this.isbutton === 3) {
          return "stateStyletwo";
        }
        if (this.isbutton === 1) {
          return "stateStylefour";
        }
      }
    },
    //删除
    batchdelete() {
      this.$emit("batchdelete", this.pitchOn);
    },
    //批量预约
    online() {
      this.$emit("online", this.pitchOn);
    },
    // 查看详情路由跳转
    jumpTo(item) {
      for (let i = 1; i <= 25; i++) {
        if (i == item.classId) {
          item.classId == 23
            ? (this.path = "/mybussinessForm" + 24)
            : (this.path = "/mybussinessForm" + i);
        }
      }
      this.$router.push({
        path: "/business/myBusiness" + this.path,
        query: { id: item.id },
      });
    },
  },
  mounted() {
    // this.tableData = this.name.table;
    this.tableData = this.name.table;
    this.isbutton = this.name.isbtn;
    this.pageNum = this.name.pageNum;
    this.pageSize = this.name.pageSize;
    this.pageLength = this.name.pageLength;
    console.log(this.tableData);
  },
};
</script>

<style lang="less" scoped>
.table {
  /deep/.el-table th > .cell {
    text-align: center;
  }
  /deep/.el-table .cell {
    text-align: center;
  }
  // 预约成功的样式
  /deep/.stateStyleone {
    color: #5db5ff;
  }
  // 审核失败的样式
  /deep/.stateStyletwo {
    color: #fc5c5c;
  }
  // 审核成功的样式
  /deep/.stateStylethree {
    color: #0ee586;
  }
  // 审核中的样式
  /deep/.stateStylefour {
    color: #ffd665;
  }

  // 分页样式
  .paging {
    display: flex;
    justify-content:center;
    align-items: center;
    padding: 24px;
    .batchdelete {
      margin-right: 20px;
    }
  }
}


</style>
